<template>
	<el-row :gutter="10" class="mb8">
		<el-col :span="1.5">
			<el-button type="primary" plain @click="showDialog(null)">新增</el-button>
		</el-col>
	</el-row>
	<el-table :data="tableData" style="width: 100%" border>
		<el-table-column prop="appName" label="应用名称" width="100" />
		<el-table-column prop="AppId" label="AppId" width="100" />
		<el-table-column prop="editionNumber" label="版本号" width="80" />
		<el-table-column prop="editionName" label="版本名称" width="100" />
		<el-table-column prop="editionIssue" label="是否发行" width="100">
			<template #default="{ row }">
				<el-tag type="primary" v-if="row.editionIssue === 1">是</el-tag>
				<el-tag type="success" v-else>否</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="packageType" label="是否整包更新" width="120">
			<template #default="{ row }">
				<el-tag type="primary" v-if="row.packageType === 1">是</el-tag>
				<el-tag type="success" v-else>否</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="editionForce" label="是否强制更新" width="120">
			<template #default="{ row }">
				<el-tag type="primary" v-if="row.editionForce === 1">是</el-tag>
				<el-tag type="success" v-else>否</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="操作" align="center" fixed="right">
			<template #default="{ row }">
				<el-button type="text" link @click="showDialog(row)">编辑</el-button>
				<el-button type="text" link @click="delRecord(row)">删除</el-button>
				<el-button type="text" link @click="toDetail(row)">详情</el-button>
			</template>
		</el-table-column>
	</el-table>

	<!-- 更新输入框 -->
	<el-dialog title="app升级" width="700px" v-model="dialogVisible">
		<el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef" :rules="rules">
			<el-form-item label="app名称" prop="appName">
				<el-input v-model="form.appName" />
			</el-form-item>
			<el-form-item label="AppId" prop="AppId">
				<el-input v-model="form.AppId" />
			</el-form-item>
			<el-form-item label="是否整包更新">
				<el-radio-group v-model="form.packageType">
					<el-radio :value="1" size="large">是</el-radio>
					<el-radio :value="0" size="large">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否强制更新">
				<el-radio-group v-model="form.editionForce">
					<el-radio :value="1" size="large">是</el-radio>
					<el-radio :value="0" size="large">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否静默更新">
				<el-radio-group v-model="form.editionSilence">
					<el-radio :value="1" size="large">是</el-radio>
					<el-radio :value="0" size="large">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否发行">
				<el-radio-group v-model="form.editionIssue">
					<el-radio :value="1" size="large">是</el-radio>
					<el-radio :value="0" size="large">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="app更新地址" prop="editionUrl">
				<el-input v-model="form.editionUrl" />
			</el-form-item>
			<el-form-item label="app更新内容" prop="describe">
				<el-input type="textarea" v-model="form.describe" @blur="look" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="centerDialogVisible = false">确定</el-button>
			</div>
		</template>
	</el-dialog>
	<p></p>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const dialogVisible = ref(false);
const ruleFormRef = ref(null);
const tableData = ref([
	{	
		id:1,
		appName: 'uni-app x',
		AppId: 'UNI_XXXXX',
		describe: '<p>1、修复已知问题</p> <p>2、优化用户体验</p>',
		editionUrl: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/pkg/hello-uniappx.apk',
		editionForce: 0,
		packageType: 1,
		editionIssue: 1,
		editionNumber: 100,
		editionName: '1.0.0',
		editionSilence: 0
	}
]);

const form = ref({
	appName: null,
	AppId: null,
	describe: '<p>1、修复已知问题</p> <p>2、优化用户体验</p>',
	packageType: 1,
	editionIssue: 1,
	editionNumber: null,
	editionName: null,
	editionSilence: 0,
	editionForce: 1
});

const rules = ref({
	appName: [{ required: true, message: '请输入app名称', trigger: 'blur' }],
	AppId: [{ required: true, message: '请输入AppId', trigger: 'blur' }],
	editionUrl: [{ required: true, message: '请输入app更新地址', trigger: 'blur' }],
	describe: [{ required: true, message: '请输入app更新内容', trigger: 'blur' }]
});

/**
 * 定义深拷贝函数
 */
const deepClone = (obj) => {
	return JSON.parse(JSON.stringify(obj));
};

/**
 * 新增、编辑弹窗
 */
const showDialog = (row) => {
	dialogVisible.value = true;
	if (row) {
		form.value = deepClone(row); // 使用深拷贝
	}
};

/**
 * 删除
 */
const delRecord = () => {
	ElMessageBox.confirm('确认删除该数据吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			ElMessage({
				type: 'success',
				message: '假装删除成功'
			});
		})
		.catch(() => {});
};

/**
 * 详情
 */
const toDetail = (row) => {
	uni.navigateTo({
		url:'/pages/update/detail?id=' + row.id
	})
}
</script>

<style scoped>
.mb8 {
	margin-bottom: 8px;
}
</style>
